<template>
	<view class="all_body">
		<view class="" class="title">
			找回密码
		</view>
		<view class="baby_container">
			<view class="baby_img">
				<image src="../../static/image/cat.jpeg" mode=""></image>
			</view>
			
			<view class="bady_input">
				
				
				
				
				<view class="input_item input_button">
					<input type="text" value="" placeholder="请输入邮箱"  v-model="mail"/>
					<button type="primary" @click="sendMail()">发送验证码</button>
				</view>
				<view class="input_item" >
					<input  value="" placeholder="请输入验证码" v-model="code" />
				</view>
				
				<view class="input_item">
					<input type="text" value="" placeholder="请输入新的密码" v-model="password" />
				</view>
				<view class="input_item" >
					<input  value="" placeholder="请输再次入密码"  v-model="rePassword" />
				</view>
				
			
			
				<view class="btn_user_login">
					<button type="default" @click="changePs()">修改密码</button>
				</view>
				
				
			</view>
			
			
		
		
		</view>
	
		
		
	</view>	
</template>

<script>
	import request from '../../static/utils/request.js'
	import mail from '../../static/utils/mail.js'
	export default {
		data(){
			return {
				mail:'',
				code:'',
				password:'',
				rePassword:''
			}
		},
		methods:{
			async	sendMail(){
					let res = await mail({mail:this.mail})
					console.log(res)
						if(res.data.err==-1){
							uni.showToast({
								title:res.data.msg,
								icon:"none"
							})
						}else if(res.data.err==0){
							uni.showToast({
								title:res.data.msg
							})
							this.isSendMail = true
							this.count = 60
							let timer = setInterval(()=>{
			                  if(this.count>0&&this.count<=60){
								  this.count-=1
							  }else{
								 clearInterval(timer)
								  this.isSendMail = false
							  }						
							},1000)
						}
					},
				async	changePs(){
					let parmas = {
						mail:this.mail,
						code:this.code,
						ps:this.rePassword
					}
						if(this.rePassword == this.password){
							let res = await request("POST","findpwdByMail",parmas)
							if(res.data.err==0){
								uni.showToast({
									title:res.data.msg
								})
							}else{
								uni.showToast({
									title:res.data.msg,
									icon:'none'
								})
							}
						}
					}
		}
	}
</script>

<style lang="less">
	.title{
		width: 100%;
		height: 100rpx;
		// background-color: black;
		margin-top: 50rpx;
		text-align: center;
		font-weight: 400;
		font-size: 45rpx;
	}
	.baby_container{
		width: 80%;
		height: 70%;
		// background: pink;
		border: 1rpx solid rgba(187, 187, 187,0.1);;
		box-shadow: 0 0 40rpx rgba(170, 170, 170,1);
		margin: auto;
		padding-top: 40rpx;
		box-shadow:5px black ;
		position: relative;
		.baby_img{
			width: 100%;
			height: 260rpx;
			// background: yellow;
			display: flex;
			justify-content: center;
			align-items: center;
			image{
				width: 180rpx;
				height: 180rpx;
				border-radius: 50%;
				
			}
		}
		.bady_input{
			width: 100%;
			height: 40%;
			// background: black;
			margin-bottom: 100rpx;
			.input_item{
				width: 80%;
				height: 20%;
				margin: auto;
				border-bottom: 1rpx solid black;
            	input{
					width: 100%;
					height: 100%;
					// margin-bottom: 30rpx;
					font-size: 25rpx;

					transform: translateX(30rpx);
			        text-align: left;
				}			
			}
		}
		.baby_item_other{
			display: flex;
			justify-content: space-around;
			align-items: center;
			font-size: 25rpx;
			padding-top: 20rpx;
			.item_detail{
				width: 100%;
				text-align: center;
			}
		}
		.btn_user_login{
			margin-top: 70rpx;
			width: 100%;
			height:20%;
		    
			button{
				width: 80%;
				border-radius: 50rpx;
				color: #fff;
				background: rgba(51, 54, 67, 1)
		
			}
		}
		.foot_reg{
			position: absolute;
			bottom: 0;
			width: 300px;
			height: 100rpx;
			// background: pink;
			text-align: center;
			font-size: 25rpx;
			
		}
	}
	.input_button{
		display: flex;
		justify-content: space-around;
		align-items: center;
		
		button{
		   width: 60%;
		   height: 50rpx;
		   font-size: 20rpx;
		   	
		}
		input{
			margin-bottom: 0 !important;
		}
	}
	
	
</style>